<template>
  <view class="share">
    <view class="share-tab">
      <view class="share-tab-title">
        <view class="title-inner">
          <uni-segmented-control
            :current="current"
            :values="items"
            @clickItem="onClickItem"
            style-type="text"
            active-color="#fa541c"
          ></uni-segmented-control>
        </view>
      </view>
    </view>
    <view class="share-tab-content">
        <view v-if="current === 0">
          <goto-login v-if="!hasLogin"></goto-login>
          <share-inner v-else :remarks="innerRemarks" @addLikes="addLikes"></share-inner>
        </view>
        <view v-if="current === 1">
          <goto-login v-if="!hasLogin"></goto-login>  
          <share-outter v-else :remarks="outterRemarks" @addLikes="addLikes2"></share-outter>
        </view>
        <view v-show="isLoadMore">
          <uni-load-more :status="loadStatus" :contentText="contentText"></uni-load-more>
        </view>
    </view>
  </view>
</template>

<script>
import shareOutter from './share-outter'
import {getInnerRemarkList, getOutterRemarkList, dianzan, notLike} from '@/api/remark'
import shareInner from './share-inner'
// import gotoLogin from '@/pages/share/gotoLogin'
import {uniSegmentedControl,uniLoadMore} from '@dcloudio/uni-ui'
import {mapState} from 'vuex'
import gotoLogin from './gotoLogin.vue'
export default {
  name: 'share',
  components: {
    shareOutter,
    shareInner,
    uniSegmentedControl,
    uniLoadMore,
    gotoLogin
  },
  // onShow() {
  //   console.log('用户',this.hasLogin)
  //   this.getInnerData()
  //   this.getOutterData()
  // },
  // onHide() {
  //   this.innerRemarks = []
  //   this.outterRemarks = []
  // },
  onLoad() {
    console.log(this.current)
    this.getInnerData()
    this.getOutterData()
  },
  computed: {
    ...mapState(['userInfo', 'hasLogin'])
  },
  data() {
    return {
      items: ['校内星球','校外星球'], // 头部导航条目
      current: 0, // 当前导航索引
      innerRemarks: [],
      outterRemarks: [],
      pageQuery: {
        pageNum: 1,
        pageSize: 5
      },
      contentText: {
        contentdown: "上拉显示更多",
        contentrefresh: "正在加载...",
        contentnomore: "没有更多数据了"
      },
    	loadStatus:'loading',  //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
      isLoadMore:false,  //是否加载中
    }
  },
  methods: {
    addLikes(index) {
      const item = this.innerRemarks[index]
      const before = item.dianZanNum
      const beforeStatus = item.isAdmired
      const data = {
				admirerId: this.userInfo.id,
				commentId: item.id,
				likedId: item.userId
			}
      if (beforeStatus === 0) {
        dianzan(data).then(res => {
          console.log(res)
          if(res.code === 200) {
            this.$set(this.innerRemarks[index], 'dianZanNum', before+1)
            this.$set(this.innerRemarks[index], 'isAdmired', 1)
            uni.showToast({
              title: res.message,
              duration: 500
            })
          } else {
            uni.showToast({
              title: res.message,
              icon: 'none'
            })
          }
        })
      } else {
        notLike(data).then(res => {
            console.log(res)
            if(res.code === 200) {
              this.$set(this.innerRemarks[index], 'dianZanNum', before-1)
              this.$set(this.innerRemarks[index], 'isAdmired', 0)
              uni.showToast({
                title: res.message,
                duration: 500
              })
            } else {
              uni.showToast({
                title: res.message,
                icon: 'none'
              })
            }
        })
      }
    },
    addLikes2(index) {
      const item = this.outterRemarks[index]
      const before = item.dianZanNum
      const beforeStatus = item.isAdmired
      const data = {
				admirerId: this.userInfo.id,
				commentId: item.id,
				likedId: item.userId
			}
      if (beforeStatus === 0) {
        dianzan(data).then(res => {
          console.log(res)
          if(res.code === 200) {
            this.$set(this.outterRemarks[index], 'dianZanNum', before+1)
            this.$set(this.outterRemarks[index], 'isAdmired', 1)
            uni.showToast({
              title: res.message,
              duration: 500
            })
          } else {
            uni.showToast({
              title: res.message,
              icon: 'none'
            })
          }
        })
      } else {
        notLike(data).then(res => {
            console.log(res)
            if(res.code === 200) {
              this.$set(this.outterRemarks[index], 'dianZanNum', before-1)
              this.$set(this.outterRemarks[index], 'isAdmired', 0)
              uni.showToast({
                title: res.message,
                duration: 500
              })
            } else {
              uni.showToast({
                title: res.message,
                icon: 'none'
              })
            }
        })
      }
    },
    // 切换导航
    onClickItem(e) {
      console.log('用户',this.hasLogin)
      if (this.current !== e.currentIndex) {
          this.current = e.currentIndex;
      }
    },
    getInnerData() {
      const data = 	{
				pageNum: this.pageQuery.pageNum,
				pageSize: this.pageQuery.pageSize,
				currentUserId: this.userInfo.id
			}
			getInnerRemarkList(this.userInfo.schoolId,data).then(res => {
					if(res.code !== 200) {
						return uni.showToast({
							title: res.msg,
							icon: 'none'
            })
          }
          else {
            console.log(res.data)
            if(res.data.list.length !== 0){
              this.innerRemarks=this.innerRemarks.concat(res.data.list)
              this.isLoadMore=false
            }else{
              this.isLoadMore=true
              this.loadStatus='noMore'
            }
          }
      })
    },
    getOutterData() {
      const data = 	{
				pageNum: this.pageQuery.pageNum,
				pageSize: this.pageQuery.pageSize,
				currentUserId: this.userInfo.id
			}
			getOutterRemarkList(this.userInfo.schoolId,data).then(res => {
					if(res.code !== 200) {
						return uni.showToast({
							title: res.msg,
							icon: 'none'
            })
          }
          else {
            console.log(res.data)
            if(res.data.list.length !== 0){
              this.outterRemarks=this.outterRemarks.concat(res.data.list)
              this.isLoadMore=false
            }else{
              this.isLoadMore=true
              this.loadStatus='noMore'
            }
          }
      })
    },
	  //下拉刷新
    onPullDownRefresh() {
      console.log('刷新', this.current)
      this.pageQuery.pageNum = 1
      if(this.current === 0) {
        this.innerRemarks = []
        this.getInnerData()
      } else {
        this.outterRemarks = []
        this.getOutterData() 
      }
    },
    //触底加载更多
    onReachBottom(e) {
      console.log('加载', this.current)
      if(!this.isLoadMore){  //此处判断，上锁，防止重复请求
        this.isLoadMore=true
        this.pageQuery.pageNum+=1
        if(this.current === 0) {
          this.getInnerData()
        } else {
          this.getOutterData()
        }
      }
    },
    onLoad() {
      console.log(this.current)
      this.getInnerData()
      this.getOutterData()
    },
  }
}
</script>
<style lang='scss'>
  .share {
    .share-tab {
      .share-tab-title {
        position: relative;
        .title-inner {
          width: 70%;
          margin: 0 auto;
        }
      }
    }
    // .share-tab-content {
    //   margin-top: 20px;
    // }
  }
</style>
